<template>
	<!-- <view class="uni-container"> -->
		<view class="startbg">
			<!-- <text @click="next">立即体验</text> -->
			<!-- <image class="img" src="../../static/image/login/commonbg.png" mode=""></image> -->
			<view class="back" @click="back">
				<image src="../../static/image/login/left.png" mode=""></image>
			</view>
			<view class="box">
				<text class="title">请输入短信验证码</text>
				<text class="tel" v-if="type == 1">已发送验证码至 188****9080</text>
				<!-- <text class="code" v-if="type == 2">已发送验证码至 188 9898 908</text> -->
				<!-- <text class="versuccess" v-if="type == 3">设置登录密码用于登录</text> -->
	<!-- 			<view class="area">
					<image src="/static/image/login/check.png" mode=""></image>
					<text>我已经仔细阅读并同意</text>
					<text class="active" @click="goPage('/pages/userAgree/userAgree')">《用户服务协议》</text>
					<text>和</text>
					<text class="active" @click="goPage('/pages/privacyPolicy/privacyPolicy')">《用户隐私政策》</text>
				</view> -->
				<view class="form" :style="type == 1 ? 'margin-bottom: 0rpx;':''">
<!-- 					<view class="row" v-if="type == 1">
						<text style="color: #595959;font-size: 28rpx;line-height: 40rpx;">+86</text>
						<image src="../../static/image/login/download.png" style="margin-left:12rpx;;margin-right: 20rpx;width:28rpx;height:28rpx;" mode=""></image>
						<input @input="onInputAccount" placeholder-style="color:#999999;font-size:28rpx;background-color: transparent;" 
						class="uni-input" focus inputmode="tel" 
						placeholder="请输入手机号码" />
					</view> -->
					<view class="row" v-if="type == 1">
						<!-- <image src="../../static/image/login/pwd.png" mode=""></image> -->
						<input @input="onInputCode" placeholder-style="color:#999999;font-size:28rpx;background-color: transparent;" 
						class="uni-input" focus inputmode="tel" 
						placeholder="请输入短信中的验证码" />
						<text class="wagnjimima">5s后重新获取</text>
					</view>
<!-- 					<view class="row" v-if="type == 3" style="margin-bottom: 0;background-color: transparent;">
						<input @input="onInputnewPwd" placeholder-style="color:#999999;font-size:28rpx;" 
						class="uni-input" focus inputmode="decimal" 
						placeholder="请输入密码" />
					</view> -->
<!-- 					<view class="row" style="margin-bottom: 80rpx;padding-right: 140rpx;">
						<image src="../../static/image/login/pwd.png" mode=""></image>
						<input @input="onInputPwd" :password="true" placeholder-style="color:#999999;font-size:28rpx;background-color: transparent;" class="uni-input" focus placeholder="请输入密码" />
						<text class="wagnjimima">忘记密码?</text>
					</view> -->
				</view>
				<text style="color: #595959;font-size: 28rpx;line-height: 40rpx;margin-bottom: 80rpx;margin-left: 10rpx;" 
				v-if="type == 1">收不到验证码？</text>
				<text v-if="type == 1" class="btn" @click="loginOne">登录</text>
				<!-- <text v-if="type == 2" class="btn" @click="loginTwo">确定</text> -->
				<!-- <text v-if="type == 3" class="btn" @click="loginThree">确认注册</text> -->
				
	<!-- 			<view class="area" v-if="type == 1">
					<image src="/static/image/login/check.png" mode=""></image>
					<view class="in">
						<text>我已经仔细阅读并同意</text>
						<text class="active" @click="goPage('/pages/userAgree/userAgree')">《用户服务协议》</text>
						<text>和</text>
						<text class="active" @click="goPage('/pages/privacyPolicy/privacyPolicy')">《用户隐私政策》</text>
					</view>
				</view> -->
				<!-- <text v-if="type == 3" class="btn" @click="loginThree">确定重置</text> -->
				<view class="operate">
					<text>换个手机号</text>
				</view>
			</view>
			
		<!-- 	<text class="register">
				注册账号
			</text> -->
		</view>
	<!-- </view> -->
</template>

<script>
	export default {
		data() {
			return {
				tel: '',
				code: '',
				newPwd: '',
				type: 1, // 1验证手机号
				// pwd: ''
			}
		},
		methods: {
			back() {
				if(this.type <=1) {
					uni.navigateBack()
					return
				}
				this.type -=1
			},
			loginOne() {
				// this.type = 2
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},
			loginTwo() {
				this.type = 3
				
			},
			loginThree() {
				console.log('确定')
				// this.type = 1
			},
			goPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			onInputAccount(event) {
				this.tel = event.target.value
			},
			onInputCode(event) {
				this.code = event.target.value
			},
			onInputnewPwd(event) {
				this.newPwd = event.target.value
			},
			onInputPwd(event) {
				this.pwd = event.target.value
			},
			login() {
				let params = {
					account: this.account,
					pwd: this.pwd
				}
				console.log('params', params)
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
	        display: flex;
	        flex-direction: column;
	        height: 100%;
			min-height: 100vh;
			background-color: red;
	    }
	// .uni-container {
	// 	height: 100%;
	// }
	
	

.startbg {
	width: 100%;
	height: 100%;
	// background-color: pink;
	height: 100vh;
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../../static/image/login/commonbg.png);
	
	.back {
		position: absolute;
		top: 114rpx;
		left: 30rpx;
		width: 40rpx;
		height: 40rpx;
		image {
			width: 34rpx;
			height: 34rpx;
		}
	}
	
	.img {
		width: 100%;
		height: 100%;
	}

	// text {
	// 	width: 240rpx;
	// 	height: 72rpx;
	// 	// background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
	// 	border-radius: 18rpx;
	// 	position: absolute;
	// 	bottom: 152rpx;
	// 	left: 50%;
	// 	margin-left: -120rpx;
	// 	font-size: 28rpx;
	// 	color: #FFFFFF;
	// 	// line-height: rpx;
	// 	text-align: center;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// }
	
	.box {
		// margin-top: 328rpx;
		// width: 100%;
		box-sizing: border-box;
		padding: 0 28rpx;
		padding-top: 328rpx;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// background-color: pink;
		.title {
			font-weight: 500;
			font-size: 48rpx;
			color: #1A1A1A;
			line-height: 66rpx;
			margin-bottom: 16rpx;
		}
		.tel {
			color: #777777;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 80rpx;
		}
		.code {
			color: #777777;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 80rpx;
		}
		.versuccess {
			color: #777777;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 80rpx;
		}
		// .phone {
		// 	font-weight: 500;
		// 	font-size: 48rpx;
		// 	color: #1A1A1A;
		// 	line-height: 66rpx;
		// 	margin-bottom: 100rpx;
		// }
		.area {
			margin-bottom: 40rpx;
			display: flex;
			align-items: flex-start;
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
				margin-top: 10rpx;
			}
			.in {
				// display: flex;
				// align-items: flex-start;
				text {
					color: #7c7c7c;
					line-height: 34rpx;
					font-size: 24rpx;
				}
				.active {
					color: #006ff6;
				}
			}
		}
		.form {
			margin-bottom: 80rpx;
			.row {
				
				display: flex;
				align-items: center;
				padding-bottom: 18rpx;
				border-bottom: 1rpx solid #ECEEF0;
				margin-bottom: 40rpx;
				position: relative;
				image {
					width: 56rpx;
					height: 56rpx;
					margin-right: 18rpx;
				}
				input {
					font-size: 28rpx;
				}
				.wagnjimima {
					position: absolute;
					bottom: 36rpx;
					right: 0;
					color: #006FF6;
					font-size: 28rpx;
				}
			}
		}
		.tips {
			font-size: 24rpx;
			color: #F82400;
			line-height: 34rpx;
			margin-bottom: 80rpx;
		}
		.btn {
			width: 100%;
			margin: 0 auto;
			height: 88rpx;
			background: #006FF6;
			border-radius: 44rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 40rpx;
		}
		.area {
			margin-bottom: 40rpx;
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
			text {
				color: #7c7c7c;
				line-height: 34rpx;
				font-size: 34rpx;
			}
			.active {
				color: #006ff6;
			}
		}
		.operate {
			width: 100%;
			display: flex;
			justify-content: center;
			text {
				font-size: 28rpx;
				color: #006FF6;
				line-height: 40rpx;
			}
		}
	}
	.register {
		position: fixed;
		bottom: 168rpx;
		font-size: 28rpx;
		color: #006FF6;
		line-height: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>
